<!-- 绩效 -->
<template>
	<div>
		<el-card class="box-card" style="height: 100%;">
			<div class="card-header" style="height: 100%;">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-input v-model="queryInfo.nickname" placeholder="考核人"></el-input>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-button type="info" icon="el-icon-search" @click="getPerList()">搜索</el-button>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content bg-purple">
							<el-button class="button" icon="el-icon-plus" type="primary" @click="openAdd()">新增
							</el-button>
							<el-button class="button" icon="el-icon-delete" type="danger" @click="deletes()">删除
							</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
			<el-table :data="tableData" height="400" border style="width: 100%"
				@selection-change="handleSelectionChange" :default-sort="{prop: 'operTime', order: 'descending'}">
				<el-table-column type="selection" width="40" prop="id"></el-table-column>
				<el-table-column prop="bkhrName" sortable label="被考核人"></el-table-column>
				<el-table-column prop="khrName" label="考核人" ></el-table-column>
				<el-table-column prop="time1" label="考核时间"></el-table-column>
				<el-table-column prop="grade" label="考核等级" :formatter="fortype"></el-table-column>

				<el-table-column prop="operUser" label="操作人"></el-table-column>
				<el-table-column prop="operTime" sortable label="操作时间"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template #default="scope">
						<el-button type="text" size="small" @click="openUpdate(scope.row.id)">修改</el-button>
						<el-button type="text" size="small" @click="delete1(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页-->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[3, 6, 9, 12]" :page-size="3" layout="total, sizes, prev, pager, next, jumper"
					:total="total">
				</el-pagination>
			</div>
		</el-card>

    <addPer ref="addPerDilog"></addPer>
    <updatePer ref="updatePerDilog"></updatePer>
	</div>
</template>

<script>
	import addPer from "./add.vue"
	import updatePer from "./update.vue"
	export default {
		components: {
		  addPer,
		  updatePer
		},
		data() {
			return {
				tableData: [],
				queryInfo: {
					nickname: "",
					bkhrName: "",
					khrName: "",
					time1: "",
					grade: "",
					operUser: "",
					operTime: "",
					currentPage: 1,
					pagesize: 3,
				},
				total: 10,
				ckrow: []
			}

		},
		methods: {
			//批量删除
			deletes() {
				if (this.ckrow.length == 0) {
					this.$message({
						message: "请至少选择一项",
						type: 'warning'
					});
					return;
				} else {
					this.$confirm('您确定要删除吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						var ids = "";
						this.ckrow.forEach(function(e) {
							ids += e.id + ',';
						})
						var _this = this;
						this.$http.post("/performance/deletes", {
							ids: ids
						}).then(function(res) { // eslint-disable-line no-unused-vars
							_this.getPerList();
						})
						this.$message({
							type: 'success',
							message: '批量删除成功!',
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});

				}
			},
			handleSelectionChange(val) {
				this.ckrow = val;
			},
			//单个删除
			delete1(id) {
				this.$confirm('您确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var _this = this;
					this.$http.post("/performance/delete/" + id).then(function(
					res) { // eslint-disable-line no-unused-vars
						_this.getPerList();
					})
					this.$message({
						type: 'success',
						message: '删除成功!',
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			openAdd() {
				this.$refs.addPerDilog.dialogVisible = true; //调用子组件
			},
			openUpdate(id) {
				this.$refs.updatePerDilog.dialogVisible = true; //调用子组件
				this.$refs.updatePerDilog.findPerInfo(id);
				this.$refs.updatePerDilog.form.id = id;
			},
			//改变页数大小时触发
			handleSizeChange(val) {
				this.queryInfo.pagesize = val;
				this.getPerList();
			},
			//选择页数触发
			handleCurrentChange(val) {
				this.queryInfo.currentPage = val;
				this.getPerList();
			},
			//查询列表
			getPerList() {
				var _this = this;
				this.$http.post("/performance/getList", _this.queryInfo).then(function(res) {
					console.log(res)
					_this.tableData = res.data.perList
					_this.total = res.data.total;

				})
			},
			fortype(row, column, cellValue, index) { // eslint-disable-line no-unused-vars
			  if (cellValue == 0) {
			    return "优秀";
			  } else if (cellValue == 1) {
			    return "良好";
			  } else if (cellValue == 2){
			    return "普通";
			  } else{
				return "未完成";
			  }
			}

		},
		created() {
			//加载列表
			this.getPerList();
		}
	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}
</style>
